<template>
	<view>
		<view class="nowadaycity"><text>当前城市</text></view>
		<view class="cityLayer">
			<view class="item" v-for="(item,index) in city1" :key='index' @tap="jumps(index,item)">
				<text class="citytitle">{{item.citytitle}}</text>
				<view class="down">
					<view class="size">
						<text class="map">地图{{item.mapsize}}MB</text>
						<text class="nav">导航{{item.navsize}}MB</text>
					</view>
					<image class="xiazai" src="../../../static/myPic/xiazaiH.png" mode=""></image>
				</view>
				<view class="line"></view>
			</view>
		
			<view class="btn">
				<view class="look"><text>查看地图</text></view>
				<view class="delete"><text>删除</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		// components:{
		// 	cityList,
		// 	DownloadGL
		// },
		data() {
			return {
				// curTabIndex: 0,
				// tabIndex: 1 ,//默认选中第一个tab
				// tabBars: [{
				// 		name: '下载管理'
				// 	},
				// 	{
				// 		name: '城市列表'
				// 	}
				// ],
				city1:[
					{
						citytitle:'基础功能包',
						mapsize:'12.2',
						navsize:'7.9',
					},
					{
						citytitle:'沈阳市',
						mapsize:'31.3',
						navsize:'7.9',
						
					}
				],
				
			}
		},
	}
</script>

<style>
	.nowadaycity{
		width: 745upx;
		height: 80upx;
		background: #F6F6F6;
	}
	.nowadaycity text{
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #999999;
		margin-left: 40upx;
		margin-top: 20upx;
		position: absolute;
	}
	.item{
		display: flex;
		flex-direction:column;/*控制方向 --*/
		justify-content:flex-start; /*对齐方式*/
		/* align-items:center;/*行高*/ 
	}
	.citytitle{
		margin-left: 40upx;
		margin-top: 23upx;
		font-size: 28upx;
		font-family: Microsoft YaHei Regular;
		color: rgba(51,51,51,1);
	}
	.img{
		width: 32upx;
		height: 31upx;
		
	}
	.down{
		display: flex;
		flex-direction:row;/*控制方向 --*/
		justify-content:space-between; /*对齐方式*/
		/* align-items:center;/*行高*/ 
	}
	.size{
		display: flex;
		flex-direction:row;/*控制方向 --*/
		justify-content: space-between; /*对齐方式*/
		/* align-items: center;/*行高*/ 
	}
	.size .map{
		margin-left: 40upx;
		margin-top: 22upx;
		font-size: 20upx;
		color: #999999;
	}
	.size .nav{
		margin-left: 60upx;
		margin-top: 22upx;
		font-size: 20upx;
		color: #999999;
	}
	.xiazai{
		margin-right: 43upx;
		margin-top: -10upx;
		width: 32upx;
		height: 31upx;
	}
	.line{
		width: 724upx;
		height: 1upx;
		background: rgba(239,235,235,1);
		margin-left: 14upx;
		margin-top: 18upx;
	}
	.btn{
		display: flex;
		flex-direction:row;/*控制方向 --*/
		justify-content:space-between; /*对齐方式*/
		align-items:center;/*行高 */
		margin-top: 100upx;
	}
	.look{
		width: 143upx;
		height: 50upx;
		margin-left: 204upx;
		background-image: linear-gradient(to right, #54B0FF, #5773FE);
		filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#5773FE', endColorstr='#54B0FF', GradientType=1);
		border-radius: 50upx;
	}
	.look text{
		font-size: 22upx;
		margin-left: 29upx;
		margin-top: 8upx;
		position: absolute;
		color: #FFFFFF;
	}
	.delete{
		margin-right: 203upx;
		width: 143upx;
		height: 50upx;
		background: #F6F6F6;
		border-radius: 50upx;
	}
	.delete text{
		font-size: 22upx;
		color: #999999;
		margin-left: 49upx;
		margin-top: 8upx;
		position: absolute;
	}
</style>
